<template>
  <div class="menuInfo">
      <div class="imgBox" v-if="img">
          <img :src="img" alt="">
      </div>
      <div class="IngredientList">
          <h4>用 料</h4>
          <ul>
              <li class="ing_item" v-for=" item in menuData.IngredientList" :key="item.name">
                  <span>{{ item.name }}</span>
                  <span>{{ item.number }}</span>
              </li>
          </ul>
      </div>
      <div class="steps">
          <h4>步骤</h4>
          <ul>
              <li class="ste_item" v-for=" (item, index) in menuData.steps" :key="index">
                  <img :src="item.image" alt="">
                  <span>{{index + 1 }}、</span>
                  {{ item.content }}
              </li>
          </ul>
      </div>
  </div>
</template>

<script>

import { muneById } from '../../server/getData.js'

export default {

  data () {
    return {
      menuData:{
          
      },
      img:''
    }
  },
  mounted() {
      let menuId = this.$root.$mp.query.id || '5c05e1703136f5091a2ba9ab'
      this.img = this.$root.$mp.query.img
      muneById( { menuId }, res=>{
          console.log(res)
          res.steps = res.steps.map(val=>{
              val.content = val.content.split('<br />').join('')
              return val
          })
          this.menuData = res
      })
  },
}
</script>

<style>
.steps h4,
.IngredientList h4{
    line-height: 50px;
    text-align: center;
    font-size: 20px;
}
.IngredientList ul{
    padding: 0 5%;
}
.IngredientList .ing_item{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    margin-top: 10px;
}
.IngredientList .ing_item span{
    line-height: 50px;
}

.steps {
    padding: 0 5% 50px;
}
.steps h4 {
    margin-top: 20px;
}
.ste_item{
    min-height: 50px;
    margin-top: 40px;
}
.ste_item img{
    width: 90%;
    margin-left: 5%;
}
.ste_item span{
    font-size: 20px;
}
.imgBox img{
    width: 100%;
}
</style>
